<template>
  <div>

    <div class="header-select">
      <el-input class="input" placeholder="请输入用户名" prefix-icon="el-icon-search" v-model="userNameSerch"
        clearable></el-input>
      <el-input class="input" placeholder="请输入文件名" prefix-icon="el-icon-search" v-model="fileNameSerch"
        clearable></el-input>

      <el-select style="width: 150px;margin-right: 10px;" clearable v-model="typeSerch" placeholder="请选择文件类型">
        <el-option v-for="item in types" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-button class="btn" type="primary" round @click="batchRestore()">批量恢复
        <i class="el-icon-s-promotion el-icon--right"></i>
      </el-button>

    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table ref="multipleTable" :data="tableData" style="width: auto">
        <el-table-column type="selection" />
        <el-table-column prop="userName" label="用户名" width="100px"></el-table-column>
        <el-table-column label="文件名" width="auto">
          <template slot-scope="scope">
            <div style="display: flex;">
              <i class="el-icon-document icon-table" v-if="scope.row.type=='DOCUMENT_FILE'"></i>
              <i class="el-icon-video-camera-solid icon-table" v-if="scope.row.type=='VIDEO_FILE'"></i>
              <i class="el-icon-collection icon-table" v-if="scope.row.type=='OTHER_FILE'"></i>

              <el-image class="icon-table" style="width: 50px; height: 50px" :src="http+scope.row.virtualPath"
                fit="fill" v-if="scope.row.type == 'IMAGE_FILE'">
              </el-image>

              <a title="点击预览" :href="scope.row.virtualPath != ''?http + scope.row.virtualPath:'previewErr'"
                target="_blank" style="text-decoration: none;align-self: center;color: #000;">{{scope.row.fileName}}</a>

            </div>
          </template>
        </el-table-column>

        <el-table-column label="修改时间" width="150px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>

        </el-table-column>
        <el-table-column prop="sizeStr" label="大小" width="100px"></el-table-column>

      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>




  </div>
</template>

<script>
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  import router from "@/router"
  import sizeTostr from '@/util/FileSizeUtil'
  import DownloadFile from '@/components/DownLoadFile.vue'
  import UpdateFile from '@/components/UpdateFile.vue'
  import MainHeader from '@/components/MainHeader.vue'
  export default {
    name: 'RecyclingManage',
    components: {

    },
    data () {
      return {
        http: apiUrl.baseUrl,
        pageSize: 5,
        pageSizes: [10, 15, 20, 30],
        currentPage: 1,
        total: 0,
        tableData: [],

        types: [{
          value: '0',
          label: '文档文件'
        }, {
          value: '1',
          label: '图片文件'
        }, {
          value: '2',
          label: '视频文件'
        }, {
          value: '3',
          label: '其他文件'
        }],


        typeSerch: '',
        userNameSerch: '',
        fileNameSerch: '',

      }
    },
    methods: {
      //初始化
      init () {

        let data = {
          userName: this.userNameSerch,
          fileName: this.fileNameSerch,
          type: this.typeSerch,
          state: 2,
        }

        link(apiUrl.baseUrl + '/sys/file/findPageByAdmin/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            let i = 0;
            for (i; i < ok.data.data.files.length; i++) {
              ok.data.data.files[i].sizeStr = sizeTostr(ok.data.data.files[i].size)
            }
            this.tableData = ok.data.data.files
            this.total = ok.data.data.total
          } else {
            this.$message.error('数据请求失败：' + ok.data.msg)
          }
        })

      },

      //分页监控
      handleCurrentChange (val) {
        this.currentPage = val
        this.init()
      },
      //分页监控
      handleSizeChange (val) {
        this.pageSize = val;
        this.init()
      },
      //查看按钮
      preview (row) {
        if (row.virtualPath) {
          window.open(apiUrl.baseUrl + row.virtualPath)
        } else {
          let page = this.$router.resolve({
            name: 'previewErr',
          })
          window.open(page.href, '_blank');
        }
      },

      batchRestore () {
        let data = []
        let e = {}
        let selection = this.$refs.multipleTable.selection;

        for (let index = 0; index < selection.length; index++) {
          const element = selection[index];
          e.userId = element.userId
          e.fileId = element.id
          data.push(JSON.parse(JSON.stringify(e)))
        }
        if (data.length == 0) {
          this.$message({
            message: "请选择文件",
            type: "warning",
          });
          return
        }
        this.$confirm('此操作将恢复文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          link(apiUrl.baseUrl + '/sys/file/batchRestoreAdmin/v1', 'POST', JSON.stringify(data)).then(ok => {
            if (ok.data.code === 0) {
              this.$message({
                message: "恢复成功",
                type: "success",
              });
              this.init()
            } else {
              this.$message({
                message: ok.data.msg,
                type: "error",
              });
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    mounted () {
      this.init()
    },
    watch: {
      userNameSerch (curVal, oldVal) {
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          // this.getListPOI(curVal);
          this.init()
        }, 300);
      },
      fileNameSerch (curVal, oldVal) {
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.init()
        }, 300);
      },
      typeSerch (curVal, oldVal) {
        this.init()
      },
      stateSerch (curVal, oldVal) {
        this.init()
      },
    }
  }
</script>

<style scoped>
  .table {
    margin: 10px;
    width: 90%;
  }

  .header-select {
    margin: 10px;
    display: flex;
  }

  .btn {
    margin-left: 10px;
  }

  .input {
    width: 150px;
    margin-right: 10px;
  }

  .icon-table {
    margin-right: 10px;
    display: flex;
    align-self: center;
  }
</style>